<template>
  <div id="main" style="height: 400px;"></div>
</template>

<script setup>
import * as echarts from "echarts";
import chinaMap from "../data/china.json";

const props = defineProps({
  data:Object
})

import {onMounted, watch} from "vue";

watch(props.data, () => {
  initEchart()
  console.log(123)
})

const initEchart = () => {
  const outdata=props.data
  echarts.registerMap("china", {geoJSON: chinaMap});
  const myChart = echarts.init(document.getElementById("main"));
  const option = {
    title: {
      text: "全国不同省份价格发布数量分布",
      left: 'center'
    },
    left: '20%',
    top: '5%',
    tooltip: {
      //数据格式化
      formatter: function (params, callback) {
        return (
          params.seriesName + "<br />" + params.name + "：" + params.value
        );
      },
    },
    visualMap: {
      min: 0,
      max: 5000,
      left: "30%",
      top: "bottom",
      text: ["高", "低"], //取值范围的文字
      inRange: {
        color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8']
      },
      outOfRange: {
        color: ['#999999']
      },
      show: true, //图注
    },
    geo: {
      map: "china", //引入地图数据
      roam: true, //不开启缩放和平移
      zoom: 1, //视角缩放比例
      label: {
        show: true,
        fontSize: "10",
        color: "rgba(0,0,0,0.7)",
      },
      itemStyle: {
        //高亮的显示设置
        areaColor: "#B2CAE0", //鼠标选择区域颜色
        borderColor: 'rgba(0,63,140,0.2)',
        shadowColor: 'rgba(0,63,140,0.2)',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
      },
    },
    // 鼠标悬浮提示框
    series: [
      {
        name: "省份",
        type: "map",
        geoIndex: 0,
        data: outdata,
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(() => {
  initEchart()
})
</script>

<style scoped>

</style>